<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/normalize.css" />
    <link rel="stylesheet" href="./fonts/icomoon.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="viewport">
      <!-- 左 -->
      <div class="left">
        <!-- 不知道 -->
        <div class="left-1 panel">
          <!--  -->
          <div class="inner">
            <div class="item">
              <h4>2,190</h4>
              <span>
                <i class="icon-dot" style="color: #006cff"></i>
                设备总数
              </span>
            </div>
            <div class="item">
              <h4>190</h4>
              <span>
                <i class="icon-dot" style="color: #6acca3"></i>
                设备总数
              </span>
            </div>
            <div class="item">
              <h4>3,001</h4>
              <span>
                <i class="icon-dot" style="color: #6acca3"></i>
                设备总数
              </span>
            </div>
            <div class="item">
              <h4>108</h4>
              <span>
                <i class="icon-dot" style="color: #f00"></i>
                设备总数
              </span>
            </div>
          </div>
        </div>
        <!-- 监控 -->
        <div class="left-2 panel">
          <div class="swiper">
            <div class="tabs">
              <span class="bao" data-type="gz">故障设备监控</span> |
              <span data-type="yic">异常设备监控</span>
            </div>
            <div class="head">
              <span>异常时间</span>
              <span>设备地址</span>
              <span>异常代码</span>
            </div>
            <!-- 2 -->
            <div class="swiper1">
              <ul class="swiper-wrapper"></ul>
            </div>
          </div>
        </div>
        <!-- 点位 -->
        <div class="left-3 panel">
          <div class="inner">
            <h3>点位分布统计</h3>
            <div class="chart">
              <div class="pie"></div>
              <div class="data">
                <div class="item">
                  <h4>320,11</h4>
                  <span>
                    <i class="icon-dot" style="color: #ed3f35"></i>
                    点位总数
                  </span>
                </div>
                <div class="item">
                  <h4>418</h4>
                  <span>
                    <i class="icon-dot" style="color: #eacf19"></i>
                    本月新增
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中 -->
      <div class="content">
        <!-- 地图 -->
        <div class="map">
          <!-- 1 -->
          <h3>设备数据统计</h3>
          <!-- 2 -->
          <div class="chart" id="box">w</div>
        </div>
        <!--  用户-->
        <div class="users panel">
          <div class="inner">
            <h3>全国用户总量统计</h3>
            <div class="chart">
              <div class="bar"></div>
              <div class="data">
                <div class="item">
                  <h4>120,899</h4>
                  <span>
                    <i class="icon-dot" style="color: #ed3f35"></i>
                    用户总量
                  </span>
                </div>
                <div class="item">
                  <h4>248</h4>
                  <span>
                    <i class="icon-dot" style="color: #eacf19"></i>
                    用户总量
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--  -->
        <div class="chart"></div>
      </div>
      <!-- 右 -->
      <div class="right">
        <!-- 1 -->
        <div class="order panel">
          <div class="inner">
            <div class="filter">
              <a href="javascript:;" class="show">365天</a>
              <a href="javascript:;">90天</a>
              <a href="javascript:;">30天</a>
              <a href="javascript:;">24小时</a>
            </div>
            <div class="data">
              <div class="item">
                <h4>19,78</h4>
                <span>
                  <i class="icon-dot" style="color: #ed3f35"></i>
                  订单量
                </span>
              </div>
              <div class="item">
                <h4>19,78</h4>
                <span>
                  <i class="icon-dot" style="color: #eacf19"></i>
                  销售额(万元)
                </span>
              </div>
            </div>
          </div>
        </div>
        <!-- 销售 -->
        <div class="sales panel">
          <div class="inner">
            <div class="caption">
              <h3>销售额统计</h3>
              <a href="javascript:;" class="active" data-jijie="n">年</a>
              <a href="javascript:;" data-jijie="ji">季</a>
              <a href="javascript:;" data-jijie="y">月</a>
              <a href="javascript:;" data-jijie="zho">周</a>
            </div>
            <div class="line">
              <div class="label">单位:万</div>
              <div class="lb">1</div>
              <!-- <div class="lb">2</div>
              <div class="lb">3</div>
              <div class="lb">4</div> -->
            </div>
          </div>
        </div>
        <!-- 渠道 季度 -->
        <div class="wrap">
          <div class="channel panel">
            <div class="inner">
              <h3>渠道分布</h3>
              <div class="data">
                <div class="item">
                  <h4>39 <small>%</small></h4>
                  <span>
                    <i class="icon-plane"></i>
                    机场
                  </span>
                </div>
                <div class="item">
                  <h4>28 <small>%</small></h4>
                  <span>
                    <i class="icon-bag"></i>
                    商城
                  </span>
                </div>
              </div>
              <div class="data">
                <div class="item">
                  <h4>20 <small>%</small></h4>
                  <span>
                    <i class="icon-train"></i>
                    地铁
                  </span>
                </div>
                <div class="item">
                  <h4>13 <small>%</small></h4>
                  <span>
                    <i class="icon-bus"></i>
                    火车站
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="quarter panel">
            <div class="inner">
              <h3>一季度销售进度</h3>
              <div
                class="gauge"
                _echarts_instance_="ec_1685107805744"
                style="
                  -webkit-tap-highlight-color: transparent;
                  user-select: none;
                "
              >
                <div
                  style="
                    position: relative;
                    overflow: hidden;
                    width: 210px;
                    height: 88px;
                    padding: 0px;
                    margin: 0px;
                    border-width: 0px;
                    cursor: default;
                  "
                >
                  <canvas
                    data-zr-dom-id="zr_0"
                    width="210"
                    height="88"
                    style="
                      position: absolute;
                      left: 0px;
                      top: 0px;
                      width: 210px;
                      height: 88px;
                      user-select: none;
                      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                      padding: 0px;
                      margin: 0px;
                      border-width: 0px;
                    "
                  ></canvas>
                </div>
              </div>
              <div class="label">75<small> %</small></div>
              <div class="data">
                <div class="item">
                  <h4>1,321</h4>
                  <span>
                    <i class="icon-dot" style="color: #6acca3"></i>
                    销售额(万元)
                  </span>
                </div>
                <div class="item">
                  <h4>150</h4>
                  <span>
                    <i class="icon-dot" style="color: #f00"></i>
                    同比增长
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 排行榜 -->
        <div class="top panel">
          <div class="inner">
            <div class="all">
              <h3>全国热榜</h3>
              <ul>
                <li>
                  <i class="icon-cup1" style="color: #d93f36"></i>
                  <span>可爱多</span>
                </li>
                <li>
                  <i class="icon-cup2" style="color: #68d8fe"></i>
                  <span>娃哈哈</span>
                </li>
                <li>
                  <i class="icon-cup3" style="color: #4c9bfd"></i>
                  <span>喜之郎</span>
                </li>
              </ul>
            </div>
            <div class="province">
              <h3>各省热销 <i class="date">// 近30日 //</i></h3>
              <div class="data">
                <ul class="sup">
                </ul>
                <div class="sub1">
                  <ul class="sub">
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="./js/axios.js"></script>
    <script src="./js/index.min.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/worldmap.js"></script>
    <script src="./js/pie.js"></script>
  </body>
</html>